<template>
  <div>
    <!-- 插值表达式 -->
    <h1>{{name}}</h1>
    <h1>{{age>60?'老年':'青年'}}</h1>
    <!-- 属性绑定 -->
    <div>
      <Input v-bind:value="name" type="text"/>
      <input type="text" :value="age">
      <img :src="src">
    </div>
    <!-- 事件绑定 -->
    <div>
      <input type="button" value="保存" v-on:click="handleSave">
      <input type="button" value="保存" @click="handleSave">
    </div>
    <!-- 双向绑定 -->
    <div>
      双向绑定:{{name}}
      <input type="text" v-model="name">
      <input type="button" value="改变" @click="handleChange">
    </div>
    <!-- 条件渲染 -->
    <div>
      <div v-if="sex==1">男</div>
      <div v-else-if="sex==2">女</div>
      <div v-else>未知</div>
    </div>
    <!-- 发送请求 -->
    <div>
      <input type="button" value="发送post请求" @click="handlePost">
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      name: "张三",
      age: 30,
      src: "https://my.aigcplus.me/avatar/ai-avatar.png",
      sex:"1"
    };
  },
  methods: {
    handleSave() {
      alert(this.name);
    },
    handleChange() {
      this.name = "李四";
    },
    handlePost(){
      axios.post('/api/admin/emplyee/login',{
      username:'admin',
      password:'123456'
      }).then((rs) => {
        console.log(res.data)
      }).catch((err) => {
        console.log(err.response)
      })
    }
  }
  
};



</script>


<style>
</style>
